<template>
  <div>
    <div class="songlist" @click.stop="Playlistmuc">
      <!-- <div class="index">{{ idx + 1 }}</div> -->

      <div class="song-info">
        <h3 class="songtitlename">{{ item.name }}</h3>

        <div v-show="item.artists" class="songitem">
          <div class="SQ"></div>
          <span v-for="(itm, index) of item.artists" :key="index"
            >{{ itm.name }}
            <span v-if="index < item.artists.length - 1"> / </span>
          </span>
        </div>

        <div v-show="item.ar" class="songitem">
          <div class="SQ"></div>
          <span v-for="(itm, index) of item.ar" :key="index"
            >{{ itm.name }}
            <span v-if="index < item.ar.length - 1"> / </span>
          </span>
        </div>

        <div v-show="!item.ar && !item.artists" class="songitem">
          <div class="SQ"></div>
          <span v-for="(itm, index) of item.song?.artists" :key="index"
            >{{ itm.name }}
            <span v-if="index < item.song.artists.length - 1"> / </span>
          </span>
        </div>
      </div>

      <div class="playicon" :class="{ playing: AudioplaysongId == item.id }">
        <div
          class="anima"
          :class="{ playstop: playing }"
          v-show="AudioplaysongId == item.id"
        >
          <span></span><span></span><span></span><span></span>
        </div>
      </div>
      <span
        class="iconfont icon-shanchu"
        @click.stop="delsong(item.id)"
        style="font-size: 25px; color: #afafaf; margin-left: 10px"
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
    idx: Number,
    listShow: Boolean,
    playing: Boolean,
    AudioplaysongId: Number,
  },
  data() {
    return {};
  },
  methods: {
    Playlistmuc() {
      this.$emit("Playlistmuc", this.item);
    },
    delsong(item) {
      console.log(item);
      this.$emit("delsong", item);
    },
  },
  created() {},
};
</script>

<style lang="less" scoped>
.songlist {
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin: 5px;
  border-bottom: 1px solid #ccc;
}

@keyframes plays {
  0% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(0);
  }
}
    .songtitlename {
    width: 70vw;
    overflow: hidden; /* 隐藏溢出的内容 */
    white-space: nowrap; /* 不换行 */
    text-overflow: ellipsis; /* 用省略号表示溢出的内容 */
    }

.anima {
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: space-around;

  // background-color: antiquewhite;
  span {
    display: block;
    width: 15%;
    height: 100%;
    background-color: red;
    animation: plays 0.8s linear 0;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: bottom;
    animation-play-state: paused;

    &:nth-child(1) {
      animation-delay: 0s;
    }

    &:nth-child(2) {
      animation-delay: -0.4s;
    }

    &:nth-child(3) {
      animation-delay: -0.2s;
    }

    &:nth-child(4) {
      animation-delay: -0.6s;
    }
  }

  &.playstop {
    span {
      animation-play-state: running;
    }
  }
}

.songlist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 12px;
  // border-bottom: 1px solid red;

  .index {
    // width: 30px;
    margin-right: 12px;
    text-align: center;
  }

  .song-info {
    flex: 1;
  }

  .playicon {
    background: url(../assets/iconsp.png) no-repeat -33px 0;
    background-size: 226px 128px;
    width: 30px;
    height: 30px;
  }

  .playing {
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.songitem {
  font-size: 12px;
  margin: 5px 0;

  .SQ {
    display: inline-block;
    width: 15px;
    height: 10px;
    // background-color: red;
    background: url("../assets/iconsp.png");
    background-size: 195px;
    margin-right: 5px;
  }
}
</style>